<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
    <meta name="format-detection" content="telephone=no">
    <meta charset="UTF-8">

    <meta name="description" content="Violate Responsive Admin Template">
    <meta name="keywords" content="Super Admin, Admin, Template, Bootstrap">

    <title>Super Admin Responsive Template</title>

    <!-- CSS -->
    <link href="/static/css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}" rel="stylesheet">
    <link href="/static/css/animate.min.css" th:href="@{/css/animate.min.css}" rel="stylesheet">
    <link href="/static/css/font-awesome.min.css" th:href="@{/css/font-awesome.min.css}" rel="stylesheet">
    <link href="/static/css/form.css" th:href="@{/css/form.css}" rel="stylesheet">
    <link href="/static/css/calendar.css" th:href="@{/css/calendar.css}" rel="stylesheet">
    <link href="/static/css/style.css" th:href="@{/css/style.css}" rel="stylesheet">
    <link href="/static/css/icons.css" th:href="@{/css/icons.css}" rel="stylesheet">
    <link href="/static/css/generics.css" th:href="@{/css/generics.css}" rel="stylesheet">
</head>
<body id="skin-blur-violate">
<!-- top-menu -->
<div th:replace="commons/top-menu::#header"></div>

<div class="clearfix"></div>

<section id="main" class="p-relative" role="main">

    <!-- Sidebar -->
    <aside th:replace="commons/side-menu::#sidebar(activeUri='user/list')"></aside>

    <!-- Content -->
    <section id="content" class="container">

        <!-- Messages Drawer -->
        <div th:replace="commons/top-menu::#messages"></div>

        <!-- Notification Drawer -->
        <div th:replace="commons/top-menu::#notifications"></div>

        <!-- Breadcrumb -->
        <ol class="breadcrumb hidden-xs">
            <li><a href="#">Home</a></li>
            <li><a href="#">Library</a></li>
            <li class="active">Data</li>
        </ol>

        <h4 class="page-title" th:text="${user!=null}?'编辑信息':'添加用户'"><b>添加用户</b></h4>

        <!-- Invalid Feilds -->
        <div class="block-area" id="invalid">
            <p>注意填写格式</p>
            <form role="form" class="form-validation-2" th:href="@{/user/pro}" method="post">
                <input type="hidden" name="_method" value="put" th:if="${user!=null}">

                <!-- Username -->
                <div class="row">
                    <div class="form-group">
                        <label>
                            用户名, 要求2-10字符长度
                        </label>
                        <input name="username" type="text"
                               class="input-sm validate[required,minSize[2],maxSize[10]] form-control"
                               th:value="${user!=null}?${user.username}" placeholder="...">
                    </div>

                    <!-- roleId -->
                    <div class="form-group m-b-15">
                        <label>用户权限, [管理员：拥有绝大多数权限] [普通用户：可以访问和使用主要功能] [游客：只能访问试用期，但不能使用]</label>
                        <select class="validate[groupRequired[payments]] form-control input-sm" name="roleId"
                                id="roleId">
                            <option value="1" th:selected="${user!=null}?${user.roleId==1}">用户</option>
                            <option value="0" th:selected="${user!=null}?${user.roleId==0}">管理员</option>
                            <option value="2" th:selected="${user!=null}?${user.roleId==2}">游客</option>
                        </select>
                    </div>
                </div>

                <!-- password -->
                <div class="row">
                    <div class="form-group col-md-6">
                        <label>密码, 只允许字母和数字 [0-9a-zA-Z]，要求6-20位</label>
                        <input type="text" class="input-sm validate[required,minSize[6],maxSize[20]] form-control"
                               name="password"
                               id="password" th:value="${user!=null}?${user.password}" placeholder="...">
                    </div>
                    <div class="form-group m-b-15 col-md-6">
                        <label>确认密码, 再次输入密码，以确认输入无误</label>
                        <input type="text" class="input-sm validate[required,equals[password]] form-control"
                               placeholder="...">
                    </div>
                </div>

                <!-- sex -->
                <div class="form-group m-b-15">
                    <p>性别</p>
                    <label class="radio-inline">
                                <span class="checkableBox checkableBox-radio">
                                    <input type="radio" class="validate[required]" name="sex" value="1"
                                           th:checked="${user!=null}?${user.sex==1}">
                                </span>
                        男
                    </label>
                    <label class="radio-inline">
                                <span class="checkableBox checkableBox-radio">
                                    <input type="radio" class="validate[required]" name="sex" value="0"
                                           th:checked="${user!=null}?${user.sex==0}">
                                </span>
                        女
                    </label>
                </div>

                <!-- Email -->
                <div class="form-group">
                    <label>Email, 邮箱用来接收网站消息及个人信息的</label>
                    <input name="email" class="form-control input-sm validate[required,custom[email]]" type="text"
                           th:value="${user!=null}?${user.email}" placeholder="...">
                </div>


                <!-- headUel -->
                <div class="form-group">
                    <label>头像地址, 格式如下- (Begin with http:// https:// or ftp:// )</label>
                    <input name="headUrl" value="http://" class="input-sm form-control validate[required,custom[url]]"
                           type="text"
                           th:value="${user!=null}?${user.headUrl}" placeholder="...">
                </div>

                <!-- remark -->
                <div class="form-group m-b-15">
                    <label>备注, 需要备注的信息，50字以内 </label>
                    <textarea name="remark" class="input-sm validate[required] form-control"
                              th:text="${user!=null}?${user.remark}" placeholder="..."></textarea>
                </div>

                <button class="btn btn-primary" type="submit" th:text="${user!=null}?'修改':'添加'">添加</button>
                <button type="reset" class="btn btn-primary clearfix">重置</button>
            </form>
        </div>

        <!-- Chat -->
        <div th:replace="commons/components::#chat"></div>
    </section>
</section>

<!-- Javascript Libraries -->
<!-- jQuery -->
<script src="/static/js/jquery.min.js" th:src="@{/js/jquery.min.js}"></script> <!-- jQuery Library -->

<!-- Bootstrap -->
<script src="/static/js/bootstrap.min.js" th:src="@{/js/bootstrap.min.js}"></script>

<!--  Form Related -->
<script src="/static/js/validation/validate.min.js" th:src="@{/js/validation/validate.min.js}"></script>
<!-- jQuery Form Validation Library -->
<script src="/static/js/validation/validationEngine.min.js" th:src="@{/js/validation/validationEngine.min.js}"></script>
<!-- jQuery Form Validation Library - requirred with above js -->
<script src="/static/js/icheck.js" th:src="@{/js/icheck.js}"></script> <!-- Custom Checkbox + Radio -->

<!-- UX -->
<script src="/static/js/scroll.min.js" th:src="@{/js/scroll.min.js}"></script> <!-- Custom Scrollbar -->

<!-- Other -->
<script src="/static/js/calendar.min.js" th:src="@{/js/calendar.min.js}"></script> <!-- Calendar -->
<script src="/static/js/feeds.min.js" th:src="@{/js/feeds.min.js}"></script> <!-- News Feeds -->


<!-- All JS functions -->
<script src="/static/js/functions.js" th:src="@{/js/functions.js}"></script>
</body>
</html>

